<template>
  <!-- <div class="favor-content">
    <div class="item" v-for="item in favorlist">
      <div class="item_img">
        <img class="content_img" :src="item.defaultPicture" alt="" />
        <div class="score">
          <span>{{ item.commentBrief.overall }}分</span>
          <span>{{ item.commentBrief.commentBrief }}</span>
        </div>
        <div class="info">
          <img class="avater" :src="item.logoUrl" alt="" />
          <div v-if="item.active" class="xin" alt=""></div>
          <img
            v-else
            class="favor_xin"
            src="../../../assets/img/favor/favor.png"
            alt=""
          />
          <div>
            <img
              class="reply"
              src="../../../assets/img/favor/message.svg"
              alt=""
            />
            <div class="reply_count">
              {{ item.commentBrief.totalCount || 0 }}
            </div>
          </div>
        </div>
      </div>
      <div class="address">
        <span class="address_name">{{ item.address }}</span>
        <span class="address_info">{{
          unitSummeries(item.unitSummeries)
        }}</span>
      </div>
      <div class="item_name">
        {{ item.unitName }}
      </div>
      <div class="discounts">
        <span v-for="i in item.houseTags" class="discounts_tagTitles">{{
          i.text
        }}</span>
      </div>
      <div class="item_footer">
        <span class="price"> ¥{{ item.finalPrice }} </span>
        <span class="original"> ¥{{ item.productPrice }} </span>
        <div class="discount">
          <div class="notice" v-if="item.priceTipBadge?.text"></div>
          {{ item.priceTipBadge?.text }}
        </div>
      </div>
    </div>
  </div> -->
  <item-crad :favorlist="favorlist"></item-crad>
</template>
<script setup>
import { ref } from "vue";
import useFavorStore from "@/stores/modules/favor";
import { storeToRefs } from "pinia";
// import { useRouter } from "vue-router";
import itemCrad from "@/components/item-card/item-card.vue"
// const router = useRouter();
const store = useFavorStore();
const { favorlist } = storeToRefs(store);
console.log(favorlist);
//decodeURIComponent
// const unitSummeries = (arr) => {
//   return arr
//     .map((item) => item.text)
//     .slice(0, 2)
//     .join("·");
// };
</script>
<style lang="less" scoped>
.favor-content {
  .item {
    padding: 15px;
    .item_img {
      position: relative;
      .content_img {
        width: 100%;
        border-radius: 8px;
      }
      .score {
        position: absolute;
        bottom: 5px;
        left: 5px;
        background-color: rgba(255, 255, 255, 0.85);
        border-radius: 12px;
        padding: 3px 5px;
        font-size: 12px;
      }
      .info {
        position: absolute;
        top: 15px;
        right: 5px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .avater {
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
        .xin {
          display: inline-block;
          height: 30px;
          background-image: url(../../../assets/img/sprite.png);
          background-size: 139px;
          margin-top: 5px;
          width: 27px;
          background-position: -246px 0px;
        }
        .favor_xin {
          display: inline-block;
          width: 27px;
          height: 27px;
          margin-top: 5px;
        }
        .reply {
          display: inline-block;
          width: 25px;
          height: 25px;
          margin-top: 8px;
        }
        .reply_count {
          color: #fff;
          text-align: center;
          font-size: 12px;
          margin-top: 3px;
        }
      }
    }
    .address {
      margin: 7px 0 10px 0;
      .address_name {
        color: #fff;
        background-color: #3a3f42;
        padding: 0px 2px;
        font-size: 12px;
        height: 11px;
        line-height: 12px;
        margin-right: 5px;
      }
      .address_info {
        font-size: 12px;
        color: #3a3f42;
      }
    }
    .item_name {
      font-size: 18px;
    }
    .discounts {
      margin-top: 7px;
      .discounts_tagTitles {
        background-color: #fbe4e7;
        color: #e9898e;
        padding: 0 2px;
        font-size: 14px;
        margin-right: 5px;
      }
    }
    .item_footer {
      margin-top: 8px;
      .price {
        font-size: 18px;
        color: var(--primary-color);
      }
      .original {
        font-size: 12px;
        text-decoration: line-through;
        color: #ccc;
        padding-left: 5px;
      }
      .discount {
        display: inline-block;
        background-color: #ff6666;
        color: #fff;
        padding-right: 4px;
        padding-left: 5px;
        border-radius: 8px;
        margin-left: 5px;
        .notice {
          position: relative;
          top: 2px;
          display: inline-block;
          width: 16px;
          height: 15px;
          background-image: url(../../../assets/img/sprite.png);
          background-position: -221px -152px;
        }
      }
    }
  }
}
</style>
